<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/lx/admin/components/meta.html" />
    <title>问题详情 ${metaTitleSuffix!}</title>
    <#include "/lx/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="3-1" />
            <#include "/lx/admin/components/menu.html" />
            <el-container>
                <#include "/lx/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="问题">
                                <el-input v-model="info.question" placeholder="请输入问题"></el-input>
                            </el-form-item>
                            <el-form-item label="回答">
                                <el-input v-model="info.answer" type="textarea" :autosize="{ minRows: 10 }" placeholder="请输入回答"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/lx/admin/components/footer.html" />
    </div>
    <#include "/lx/admin/components/scripts.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                schoolId: '',
                coverUrl: ''
            }
        },
        watch: {

        },
        mounted: function() {
            this.info = ${info!'{}'}
            this.schoolId = '${schoolId!}'

            // if (this.info.cover) {
            //     this.coverUrl = this.info.cover;
            // }
        },
        methods: {
            submit() {
                var self = this;
                if (!self.info.question) {
                    msg("请输入问题");
                    return;
                }
                if (!self.info.answer) {
                    msg("请输入回答");
                    return;
                }

                var url = "/lx/admin/question/submit"
                var param = {
                    id: self.info.id,
                    schoolId: self.schoolId,
                    question: self.info.question,
                    answer: self.info.answer
                };
                var success = () => {
                    if ('${referer!}' != '') {
                        window.location.href = '${referer!}';
                    } else {
                        // window.location.href = "/lx/admin/question/list";
                        window.location.href = "/lx/admin/school/list";
                    }
                }
                var fail = (response) => {
                    msg(response.data.msg);
                }
                var complete = () => {}
                axiosRequestPro(url, param, success, fail, complete);
            },
            removeImg(file, fileList) {
                this.coverUrl = "";
            },
            successImg(response, file, fileList) {
                endLoading();
                this.coverUrl = response.info.url;
            },
            errorImg(err, file, fileList) {
                endLoading();
                msg('上传图片失败')
            },
            onProgress() {
                loading();
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    input[type="file"] {
        display: none !important;
    }

    .image-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .image-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .image-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .image {
        width: 178px;
        height: 178px;
        display: block;
    }

    .limit-item {
        margin-bottom: 10px;
    }

    .limit-item:last-child {
        margin-bottom: 0;
    }
    </style>
    <#include "/lx/admin/components/msg.html" />
</body>

</html>